<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>

  <div style="padding: 15px; ">
    <form class="layui-form" action="" lay-filter="example">


      <div class="layui-form-item">
        <label class="layui-form-label">安检公司</label>
        <div class="layui-input-block" id="record_company">
        </div>
      </div>
      <!-- <div>
        <div class="layui-form-item">
          <label class="layui-form-label">线路</label>
          <div class="layui-input-block" id="record_line">
          </div>
        </div>
      </div> -->

      <div class="layui-form-item">
        <label class="layui-form-label">时间范围</label>
        <div class="layui-input-block">
          <input type="radio" name="date_type" value="0" title="周" checked="">
          <input type="radio" name="date_type" value="1" title="月">
          <input type="radio" name="date_type" value="2" title="季度">
          <input type="radio" name="date_type" value="3" title="半年">
          <input type="radio" name="date_type" value="4" title="年">
        </div>

      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">考勤状态</label>
        <div class="layui-input-block">
          <input type="checkbox" name="like2" value="0" title="正常打卡" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2" value="1" title="迟到" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2" value="2" title="早退" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2" value="3" title="漏打卡" lay-skin="primary" checked="" class="work">
          <input type="checkbox" name="like2" value="4" title="未打卡" lay-skin="primary" checked="" class="work">

          <button type="submit" class="layui-btn" lay-submit="" lay-filter="search" id="search"
            style="float:right;margin-right: 50px;">查看结果</button>
        </div>

      </div>

      <div style="padding: 20px;">
        <div id="container1" style="height:400px;"></div>

      </div>
    </form>


  </div>


  <!-- <link rel="stylesheet" href="../../src/css/layui.css"> -->
  <script src="../../src/layui.js" charset="utf-8"></script>
  <script src="....//src/setter.js?v=0513"></script>
  <script src="../../pages/js/jquery.min.js"></script>
  <script src="../../pages/js/echarts.min.js"></script>
  <script src="../../pages/js/theme/westeros.js"></script>
  <script src="../../pages/js/theme/macarons.js"></script>
  <script src="../../pages/js/theme/purple-passion.js"></script>
  <script src="../../pages/js/theme/dark.js"></script>
  <script>
    layui.use(['table', 'element', 'form', 'laydate', 'layer'], function () {
      var form = layui.form;
      var $ = layui.jquery;
      var layer = layui.layer;
      //存储关系
      var company_data = [];

      $.ajax({
        url: '../json/company.json',
        dataType: 'json',
        async: true,
        type: 'get',
        success: function (result) {
          console.log(result);

          var data = result.data;
          company_data = data;
          var company = [];
          var line = [];
          for (var i = 0; i < data.length; i++) {
            company.push(data[i]);
          }
          loadCompany(company);
          // loadLine(line);


        },
        error: function (data) {
          console.log(data);
        }
      });

      //加载公司
      function loadCompany(company) {
        var _html = '';
        //全选
        _html += '<input type="radio" name="company_radio" value="0" title="全选" checked="" lay-filter="all_company" id="all_company">';
        for (var i = 0; i < company.length; i++) {
          _html += '<input type="radio" name="company_radio" value="' + company[i].officeCode + '" title="' + company[i].name;

          _html += '"  class="company" lay-filter="filter_company"  >';
        }
        $('#record_company').html(_html);
        form.render();
      }


      //考勤状态
      var selected_work = [];
      //监听提交
      form.on('submit(search)', function (data) {
        button_click();
        return false;
      });
      button_click();

      
      function button_click() {
        //选择了哪些公司
        // var selected_company = [];
        // $("input:checkbox[class='company']:checked").each(function (i) {
        //   selected_company.push($(this).attr('title'));
        // });
        var selected = $("input[name='company_radio']:checked").val();
        if (selected == '0')//选择所有
        {
          var codes = [];
          for (var i = 0; i < company_data.length; i++) {
            codes.push(company_data[i].officeCode);
          }
          selected = codes.join(',');
        }
        selected_work = [];
        $("input:checkbox[class='work']:checked").each(function (i) {
          selected_work.push($(this).attr('value'));
        });


        if (selected_work.length == 0) {
          layer.msg('请选择考勤状态', {
            offset: 't',
            anim: 6
          });
          return false;
        }
        //时间范围
        var dateFlag = $("input[name='date_type']:checked").val();
        // var dateFlag = $("input[name='date_type']:checked").val();
        var data = { dateFlag: dateFlag, attenStates: selected_work.join(','), officeCodes: selected };

        console.log('==== 参数 ====');
        console.log(data);

        getChart(data);
        return false;
      }

      getChart();

      //获取图表数据
      function getChart(data) {
        $.ajax({
          url: '../json/record_company.json',
          dataType: 'json',
          async: true,
          data: data,
          type: 'get',
          success: function (result) {
            var data = result.data;
            console.log(selected_work);
            var name = [];
            var normal = [];
            var late = [];
            var early = [];
            var omission = [];
            var noClock = [];


            for (var i = 0; i < data.length; i++) {
              name.push(data[i].name);
              if (selected_work.indexOf('0') > -1) {//正常打卡
                normal.push(data[i].normal);
              }
              if (selected_work.indexOf('1') > -1) {//迟到
                late.push(data[i].late);
              }
              if (selected_work.indexOf('2') > -1) {//早退
                early.push(data[i].early);
              }
              if (selected_work.indexOf('3') > -1) {//漏打卡
                omission.push(data[i].omission);
              }
              if (selected_work.indexOf('4') > -1) {//未打卡
                noClock.push(data[i].noClock);
              }
            }
            loadChart(name, normal, late, early, omission, noClock)


          },
          error: function (data) {
            console.log(data);
          }
        });

      }

      //渲染图表
      function loadChart(name, normal, late, early, omission, noClock) {
        var dom1 = document.getElementById("container1");
        var myChart1 = echarts.init(dom1, "dark");
        option1 = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: ['正常打卡', '迟到', '早退', '漏打卡', '未打卡']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: name
          },
          series: [
            {
              name: '正常打卡',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return '';
                  }
                }
              },
              data: normal
            },
            {
              name: '迟到',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return '';
                  }
                }
              },
              data: late
            },
            {
              name: '早退',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return '';
                  }
                }
              },
              data: early
            },
            {
              name: '漏打卡',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return '';
                  }
                }
              },
              data: omission
            },
            {
              name: '未打卡',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight',
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return '';
                  }
                }
              },
              data: noClock
            }
          ]
        };
        if (option1 && typeof option1 === "object") {
          myChart1.setOption(option1, true);
        }
      }


    });




  </script>

</body>

</html>